// const options = {
// width: 900, // canvas的尺寸
// height: 500,
// top: 50, // 经纬网的 左上角 pixel
// left: 50,
// top: 10, // 相对于地图的offsetY
// left: 10,
// mapWidth: 800, // 地图尺寸
// mapHeight: 400,
// bounds: undefined, // map bounds
// zoom: undefined, // map zoom
// lat_degree: 10, // 纬度间隔
// lng_degree: 10 // 经度间隔
// }

// eslint-disable-next-line complexity
function setGraticules(ctx, options) {
  const { width, height, top, left, offsetX, offsetY, mapWidth, mapHeight, lat_degree, lng_degree, bounds, zoom } = options

  // ctx.clearRect(0, 0, width, height)
  ctx.save()

  const d_lat = bounds._ne.lat - bounds._sw.lat // 👇
  const d_lng = bounds._sw.lng - bounds._ne.lng // 👉

  const unitX = lng_degree || interval(zoom) // 1° 的倍数
  const unitY = lat_degree || interval(zoom)
  const rateX = Math.abs(d_lng / mapWidth)
  const rateY = Math.abs(d_lat / mapHeight)

  const left_lng = bounds._sw.lng
  const top_lat = bounds._ne.lat

  // 经度
  let step_x = Math.floor(left_lng)
  while (step_x < left_lng) { // 以unit为刻度逼近 left_lng
    step_x += unitX
  }
  const start_x = Math.abs(step_x - left_lng) / rateX + left
  for (let i = 0; step_x + unitX * i <= bounds._ne.lng; i++) {
    ctx.fillStyle = 'gray'
    ctx.textBaseline = 'top'
    // 显示数值
    // ctx.fillText(step_x + i * unitX, start_x + Math.abs(i * unitX / rateX) - 6, 14)
    // 显示格式 100°11′ E
    const degree = step_x + i * unitX
    let direction = 'W'
    if (degree === 0) direction = ''
    else if (degree > 0) direction = 'E'
    const trunc = Math.abs(Math.trunc(degree))
    const remainder = Math.ceil(Math.abs(degree % 1 * 60))

    ctx.fillText(`${trunc}°${remainder === 0 ? '' : remainder + '′'} ${direction}`, start_x + Math.abs(i * unitX / rateX) - 10, top - offsetY - 14)
    ctx.fillText('|', start_x + Math.abs(i * unitX / rateX), top - offsetY) // top
    ctx.fillText('|', start_x + Math.abs(i * unitX / rateX), mapHeight + top + offsetY) // bottom
  }
  // 纬度
  let step_y = Math.ceil(top_lat)
  while (step_y > top_lat) {
    step_y -= unitY
  }
  const start_y = Math.abs((top_lat - step_y) / rateY) + top

  for (let i = 0; step_y - unitY * i >= bounds._sw.lat; i++) {
    ctx.fillStyle = 'gray'
    ctx.textBaseline = 'top'
    // 显示数值
    // ctx.fillText(step_y - i * unitY, 44 + mapWidth, start_y + Math.abs(i * unitY / rateY))
    // 显示格式 100°11′ E
    const degree2 = step_y - i * unitY
    let direction2 = 'S'
    if (degree2 === 0) direction2 = ''
    else if (degree2 > 0) direction2 = 'N'
    const trunc2 = Math.abs(Math.trunc(degree2))
    const remainder2 = Math.ceil(Math.abs(degree2 % 1 * 60))

    if (degree2 <= 90 && degree2 >= -90) {
      ctx.fillText(`${trunc2}°`, left + mapWidth + offsetX, start_y + Math.abs(i * unitY / rateY) - 6)
      ctx.fillText(`${remainder2 === 0 ? ' ' : remainder2 + '′'} ${direction2}`, left + mapWidth + offsetX - 4, start_y + Math.abs(i * unitY / rateY) + 8)
      ctx.fillText('—', left + mapWidth + offsetX - 4, start_y + Math.abs(i * unitY / rateY)) // right
      ctx.fillText('—', left + -offsetX, start_y + Math.abs(i * unitY / rateY)) // left
    }
  }
}

// 根据zoom选择经纬度间隔
function interval(zoom) {
  let interval = 10
  if (zoom < 7) interval = 10
  else if (zoom < 9) interval = 1
  else if (zoom < 11) interval = 0.5
  else if (zoom < 12) interval = 0.25
  else interval = 0.1

  return interval
}

export { setGraticules }
